<!--  -->
<template>
  <div :class="{ item: fixed }">
    <div
      class="kyle-search"
      :style="{ position: !fixed ? 'initial' : 'fixed' }"
      :class="{ isPaved: !isShowButton }"
      tyle="width: 100%; z-index: 1000"
    >
      <div class="ipt" :class="{ isPaved: !isShowButton }">
        <i
          v-show="isShowIcon"
          :style="{ color: iconColor }"
          class="iconfont icon-sousuo-copy search-icon"
        ></i>
        <input
          type="text"
          :maxlength="maxlength"
          :placeholder="placeholder"
          v-model="currentValue"
          :class="{ clearTextIndent: !isShowIcon }"
          @keyup.enter="clickButton"
        />
        <i
          v-show="isShowClear"
          class="iconfont icon-guanbi close-icon"
          @click="clearVal"
        ></i>
      </div>

      <button v-show="isShowButton" @click="clickButton">
        {{ buttonText }}
      </button>
    </div>
  </div>
</template>

<script>
/**
 * kyle-search
 * @module components/search
 * @desc 搜索框
 * @param {String} value         - 绑定的值
 * @param {String} buttonText    - 按钮文字内容
 * @param {String} placeholder   - 搜索框占位内容
 * @param {Number} maxlength     - 最长位数
 * @param {String} placeholder   - 提示文字
 * @param {Boolean} isShowIcon   - 是否显示图标
 * @param {Array} [result_list]  - 历史搜索列表, 组件生效时
 * @param {Boolean} isShowClear  - 是否显示关闭图标
 * @param {Boolean} isClearVal   - 是否按enter键盘或按钮后清空文字
 * @param {Boolean} isShowButton - 是否显示按钮
 * @example
 <div class="top-search-bar">
    <search @clickButton="btn" :value.sync="val" :result_list.sync="result"/>
 </div>

 */
export default {
  name: "kyle-search",
  data() {
    return {
      currentValue: this.value,
    };
  },
  props: {
    value: String,
    isShowIcon: {
      type: Boolean,
      default: true,
    },
    placeholder: {
      type: String,
      default: "请输入商家或美食名称",
    },
    maxlength: {
      type: Number,
      default: 32,
    },
    iconColor: {
      type: String,
      default: "#707070",
    },
    buttonText: {
      type: String,
      default: "搜索",
    },
    result_list: Array,
    isShowClear: {
      type: Boolean,
      default: true,
    },
    isClearVal: {
      type: Boolean,
      default: false,
    },
    isShowButton: {
      type: Boolean,
      default: true,
    },
    fixed: {
      type: Boolean,
      default: true,
    },
  },
  components: {},
  watch: {
    currentValue(val) {
      this.$emit("input", val);
    },
    value(val) {
      this.currentValue = val;
    },
  },

  methods: {
    clickButton() {
      if (this.result_list && this.currentValue.trim()) {
        this.result_list.push(this.currentValue);
      }
      if (this.isClearVal) this.currentValue = "";
      this.$emit("clickButton", "ok");
    },
    clearVal() {
      this.currentValue = "";
    },
  },
  mounted() {},
};
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.item::after
  content: "";
  display: block;
  height: 55px;
  background-color: #fff

.kyle-search
    margin-top: 10px;
    max-width: 100%;
    max-width: 100%;
    width: 96%;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 23px;
    flex: 1 1 auto
    padding:10px 8px

.kyle-search.isPaved
    padding:10px 0
.search-icon
    position:absolute;
    font-size: 30px;
    left: 4px;
    top: 1px;
.ipt
    position: relative
    font-size: 16px
input[type="text"],button
    background-color rgb(245, 245, 245)
    outline: none;
    border: none;
    text-indent:23px

i,
input,
button
    color: #000;
    font-weight: blod
input
    padding:5px 13px;
    width: 255px;
    height: 28px;
input[type="text"].clearTextIndent
    text-indent: 0
button
    text-indent:0
    background-color: rgb(3, 167, 116)
    color: #fff;
    font-size: 17px;
    padding: 0;
    width: 60px;
    height: 37px;
    font-weight: 700
.close-icon
  position: absolute;
  right: 7px;
  font-size: 22px;
  bottom: 7px;

.isPaved
    width: 100%;
    overflow: hidden;
    input
      width: 100%;
</style>
